import React,{useEffect} from 'react';
import {getBannerList,getProList} from '../api/home'

import { changeBannerList, changeProList } from '../store/modules/home'

// useSelector: 是用来获取全局状态的方法
// useDispatch： 用来调用修改全局状态方法的
import { useSelector, useDispatch } from 'react-redux'

const Home = () => {

  // 获取 dispatch
  const dispatch = useDispatch()

  // 获取全局状态
  const bannerList = useSelector(state => state.home.bannerList)
  const proList = useSelector(state => state.home.proList)


  // 理解为生命周期替代方法，在挂载阶段会执行该函数
  // useEffect:会在挂载和更新时进行调用
  // 第一个参数是一个回调函数
  // 第二个参数是一个依赖项，如果不配置会在组件更新时调用，如果配置了依赖项
  // 那么就只有在依赖项发生改变的时候调用
  // 如果依赖项为一个空的数组，那么该函数就只会被调用一次
  useEffect(()=>{

    getBannerList().then(res => {
      console.log(res.data.data);
      // 将请求到的数据放在状态管理中
      dispatch(changeBannerList(res.data.data))
    })

    getProList({limitNum: 5}).then(res => {
      dispatch(changeProList(res.data.data))
    })

  },[dispatch])

  return (
    <div>
      首页内容
      <div>
        {bannerList && bannerList.map(item => {
          return (<img style={{height: 100}} src={item.img} key={item.bannerid} alt='' />)
        })}
      </div>

      <ol>
        {proList && proList.map(item => {
          return (<li key={item.proid}>{item.proname}</li>)
        })}

      </ol>
    </div>
  );
};

export default Home;
